<template>
  <div style="padding: 20px">
    <el-button icon="el-icon-circle-plus-outline" plain size="mini" type="primary" @click="handleAdd()">新增</el-button>
    <el-button size="mini" plain icon="el-icon-delete" type="danger" @click="deleteBatch()">批量删除</el-button>
    <el-tree
      :data="data"
      :props="defaultProps"
      :expand-on-click-node="false"
      :show-checkbox="true"
      node-key="id"
      :default-expanded-keys="expandedKey"
      ref="menuTree"
      style="width: 80%;margin-top: 20px"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 2" type="text" size="mini" @click="handleAdd(data)">新增</el-button>
          <el-button type="text" size="mini" @click="handleUpdate(data)">修改</el-button>
          <el-button
            v-if="node.childNodes.length === 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >删除</el-button>
        </span>
      </span>
    </el-tree>

    <category-form ref="dataForm" @ok="handleOk"></category-form>
  </div>
</template>

<script>

import {
  categoryAdd,
  deleteCategory,
  categoryTree,
  categoryUpdate,
  getById
} from '@/api/product/category'
import { addMenu, updateMenu } from '@/api/system/menu'
import {addRole, updateRole} from "@/api/system/role";
import CategoryForm from "@/views/product/category/categoryForm.vue";

export default {
  components: {CategoryForm},
  data() {
    return {
      data: [],
      expandedKey: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  created() {
    this.getCategoryTree()
  },

  methods: {

    handleOk(e) {
      this.expandedKey = e
      this.getCategoryTree()
    },

    getCategoryTree() {
      categoryTree().then(res => {
        if (res.success) {
          if (res.success) {
            this.data = res.data
          }
        }
      })
    },

    handleUpdate(data) {
      this.$refs.dataForm.edit(data)
    },

    handleAdd(data) {
      this.$refs.dataForm.add(data)
    },

    remove(node, data) {
      let ids = [data.id]
      this.$confirm(`是否删除[${data.name}]菜单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCategory(ids).then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: `[${data.name}]菜单删除成功!`
            })
            this.getCategoryTree()
            if (node.parent.data.id) {
              this.expandedKey = [node.parent.data.id]
            }
          }
        })
      }).catch(() => {
          this.$message.info('已取消删除')
        })
    },

    deleteBatch() {
      let ids = []
      let checkNodes = this.$refs.menuTree.getCheckedNodes()
      for (let i = 0; i < checkNodes.length; i++) {
        ids.push(checkNodes[i].id)
      }
      this.$confirm(`是否删除被选中菜单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCategory(ids).then(res => {
          if (res.success) {
            this.getCategoryTree()
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }
        })
      })
    }
  }
}
</script>
